<template>
	<view class="content">

		<view class="flex-around activityHead">
			<view class="alignCenter" v-if="headShow ">
				<view class="">
					曝光总量
				</view>
				<view class="number">
					{{headShow.exposureQuantity?headShow.exposureQuantity:0}}
				</view>
			</view>
			<view class="alignCenter" v-if="headShow ">
				<view class="">
					点赞总数
				</view>
				<view class="number">
					{{headShow.upvoteQuantity?headShow.upvoteQuantity:0}}
				</view>
			</view>
			<view class="alignCenter" v-if="headShow ">
				<view class="">
					评论总数
				</view>
				<view class="number">
					{{headShow.commentQuantity?headShow.commentQuantity:0}}
				</view>
			</view>
		</view>
		<view class="search-all">
			<view class="search-content flex flex1">
				<image class="search-img" src="/static/sousuo.png"></image>
				<input placeholder="请输入用户名" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
					placeholder-style="color:#8F8F8F;" />
				<view @click="changeSearch" class="search-btn flex">搜索</view>
			</view>
		</view>
		<view class="paddiing12">
			<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<view class="flex-align-center-justify-end  color6" v-if="yeartime">
					{{ yeartime }}
					<text>-</text>
					{{ monthtime }}
					<text>-</text>
					{{ daytime }}
					<image class="arrowImg" src="../../static/right-arrow.png" mode=""></image>
				</view>

			</picker>
			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" :down="downOption"
				@down="downCallback" @up="upCallback">
				<view class="activityList" v-for="(item,index) in list" :key="index">
					<view class="userAvater flex-between">
						<view class="flex-start-center">
							<image class="avater" :src="item.userAvatar" mode=""></image>
							<text style="color: black;font-weight: 700;font-size: 32rpx;">{{item.userName}}</text>
						</view>
						<view class="flex-start-center">

							<text
								style="color: red;font-weight: 700;font-size: 32rpx;">￥{{item.returnCashAmount?item.returnCashAmount:0 }}</text>
						</view>
					</view>
					<view class="userAvater flex-between border14" style="margin-top: 30rpx;">
						<view class="flex-start-center ">

							<text style="color: #999;font-weight: 700;font-size: 26rpx;">支付时间:{{item.payTime}}</text>
						</view>
						<view class="flex-start-center">

							<text style="color: #333;font-weight: 400;font-size: 26rpx;">付款￥{{item.payAmount }}</text>
						</view>
					</view>
					<view class=" flex-between " style="margin-top: 30rpx;">
						<view>

							<text
								style="color: #999;font-weight: 500;font-size: 26rpx;">曝光量：{{item.exposureAmount?item.exposureAmount:0}}</text>
						</view>
						<view class="border">

						</view>
						<view>

							<text class="margin10"
								style="color: #999;font-weight: 500;font-size: 26rpx;">点赞数：{{item.upvoteAmount?item.upvoteAmount:0}}</text>
						</view>
						<view class="border">
						
						</view>
						<view>

							<text
								style="color: #999;font-weight: 500;font-size: 26rpx;">评论数：{{item.commentAmount?item.commentAmount:0}}</text>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>




	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				title: 'activityList',
				searchVal: '',
				//选择的年份
				date: null,
				yeartime: currentDate.split('-')[0],
				//选择的月份
				monthtime: currentDate.split('-')[1],
				//选择的天数
				daytime: currentDate.split('-')[2],
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: false
				},
				windowHeight: '',
				merchantId: 476,
				headShow: null,
				list: [],

				form: {
					userName: ''

				},
				where: null
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 104;
				}
			});

		},
		mounted() {
			this.headStatisticsFn(),
				this.mescroll.resetUpScroll();
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},


		},
		methods: {
			changeInput(e) {
				this.form.userName = e.detail.value

			},
			//输入键盘的搜索
			changeSearch() {
				this.mescroll.resetUpScroll();
			},
			async headStatisticsFn() {

				const result = await this.$http.post({
					url: this.$api.headStatistics,
					data: {
						merchantId: this.merchantId
					}
				});

				if (result.code == 2000) {
					console.log(JSON.stringify(result) + '======头部')
					this.headShow = result.data
				}


			},
			async upCallback(scroll) {
				if (this.form.userName) {
					this.where = {
						page: scroll.num,
						limit: 10,
						userName: this.form.userName,
						merchantId: this.merchantId

					}
				} else {
					this.where = {
						page: scroll.num,
						limit: 10,

						merchantId: this.merchantId

					}
				}
				const result = await this.$http.post({
					url: this.$api.getActivitylist,
					data: {
						...this.where
					}
				});
				if (result.code == 2000) {

					console.log('result.data', result.data);
					// this.mescroll.endByPage(result.data.list.length, 1);
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);

				}
			},
			// 选择日期
			bindDateChange: function(e) {
				this.date = e.target.value;
				/* 在上面声明变量，split是用来截取字段*/
				this.yeartime = this.date.split('-')[0];
				this.monthtime = this.date.split('-')[1];
				this.daytime = this.date.split('-')[2];
			},

			// 日期获取
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}

				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
		}
	}
</script>

<style lang="less">
	.activityHead {
		width: 100%;
		padding-top: 38rpx;
		height: 108rpx;
		background-color: #fff;

		.alignCenter {
			text-align: center;

			.number {
				margin-top: 18rpx;
				color: #1E6CEB;
				font-family: Inter;
				font-size: 40rpx;
				font-style: normal;
				font-weight: 700;
				line-height: normal;
			}
		}


	}

	.search-all {
		padding: 30rpx 20rpx;
		background: #fff;
		margin: 2rpx 0 22rpx;

		.search-content {
			border-radius: 100rpx;
			background: #f9f9f9;
			height: 80rpx;

			.search-img {
				width: 30rpx;
				height: 30rpx;
				margin: 0 10rpx 0 30rpx;
			}

			input {
				flex: 1;
			}

			.search-btn {
				margin-left: 20rpx;
				color: #fff;
				font-size: 32rpx;
				width: 148rpx;
				height: 80rpx;
				border-radius: 48rpx;
				background: #1E6CEB;
			}
		}
	}

	.paddiing12 {
		padding: 30rpx;

		.arrowImg {
			width: 32rpx;
			height: 32rpx;

		}

		.activityList {
			box-sizing: border-box;
			padding: 24rpx;
			margin-top: 26rpx;
			background-color: #fff;
			width: 700rpx;
			height: 300rpx;
			border-radius: 20rpx;

			.userAvater {
				.avater {
					width: 62rpx;
					height: 62rpx;
					margin-right: 20rpx;
					border-radius: 52rpx;

				}

				

			}
             .border {
             
             	height: 30rpx;
             	width: 2rpx;
             	background-color: #F3F3F3;
             
             
             }
			.border14 {
				padding-bottom: 34rpx;
				border-bottom: 4rpx solid #F3F3F3;

			}




		}
	}
</style>